<!--
 * @Description: 
 * @Date: 2022-01-26 17:28:01
 * @LastEditTime: 2022-01-27 14:54:35
 * @FilePath: /vue3-element-plus/src/components/code/index.vue
 * @Author: Devin
-->
<template>
  <div class="code">
    <el-collapse-transition>
      <div class="code-content" :class="{ isOpen: isOpen }" v-show="isOpen">
        <slot></slot>
      </div>
    </el-collapse-transition>

    <div class="code-block-control" @click="isOpen = !isOpen" :class="{ isOpen: isOpen }">
      <i :class="{ 'cc-xia': !isOpen, 'cc-shang': isOpen, iconfont: true }"></i>
      <span class="span" :class="{ isOpen: isOpen }">{{ !isOpen ? '显示代码' : '隐藏代码' }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({ isOpen: false });
    return { ...toRefs(state) };
  }
});
</script>

<style scoped lang='scss'>

.code {
  margin: 0 auto;
  margin-top: 20px;
  &-block-control {
    height: 44px;
    border-top: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .span {
      display: none;
      font-size: 14px;
      margin-left: 8px;
    }
    .span.isOpen {
      color: var(--cc-main-color);
      display: inline-block;
    }
    &:hover {
      color: var(--cc-main-color);
      background-color: #f9fafc;
      .span {
        display: inline-block;
      }
    }
  }
  &-block-control.isOpen {
    color: var(--cc-main-color);
  }

  &-content.isOpen {
    border-top: 1px solid #ebeef5;
    background-color: rgba(235, 238, 245, 0.5);
  }
}

</style>